<template>
  <div class="department">
    <!-- 编辑和新增面板 -->
    <el-dialog :title="myTitle" :visible.sync="dialogShow">
      <el-form ref="myForm" :model="form" :rules="rules" label-width="100px">
        <!-- 部门名称 -->
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入部门名称" />
        </el-form-item>

        <!-- 部门编码 -->
        <el-form-item label="部门编码" prop="code">
          <el-input v-model="form.code" placeholder="请输入部门编码" />
        </el-form-item>

        <!-- 部门负责人 -->
        <el-form-item label="部门负责人" prop="manager" class="principal">
          <el-select v-model="form.manager" clearable placeholder="请选择">
            <el-option
              v-for="(item, index) in principalList"
              :key="item.index"
              :label="item.username"
              :value="item.username"
            />
          </el-select>
          <!-- <el-input v-model="form.manager" placeholder="请输入部门负责人" /> -->
        </el-form-item>

        <!-- 部门介绍 -->
        <el-form-item label="部门介绍" prop="introduce">
          <el-input v-model="form.introduce" placeholder="请输入部门介绍" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="js">
// 获取组织架构 & 新增部门
import { getDepartmentApi, getAddDepartmentApi, getInquireApi } from '@/api/departments.js'
// 获取部门负责人
import { getPrincipalApi } from '@/api/employee.js'
export default {
  name: 'AddDepartment',
  // dialogShow: 控制显示面板的隐藏
  // id: 当前点击的数据源
  props: ['dialogShow', 'id'],
  data() {
    return {
      form: {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      },
      rules: {
        // 部门名称校验
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { min: 1, max: 50, message: '密码长度: 1~50字符之间', trigger: 'blur' },
          { validator: async(blur, value, callBack) => {
            // 这个是下面的简写
            const res = await getDepartmentApi()
            // 判断当前操作是 新增 还是 编辑
            if (!this.form.id) {
              const bool = res.data.depts.some(item => {
                return item.pid === this.id && item.name === value
              })
              bool ? callBack(new Error('同级部门已存在')) : callBack()
            } else {
              // 编辑操作
              // 找到所有同级元素 部门名字 包括 id
              const arr = res.data.depts.filter(item => {
                return item.pid === this.form.pid && item.id !== this.form.id
              })
              // 判断是否有名称相同的元素
              const bool = arr.some(item => {
                return item.name === value
              })
              bool ? callBack(new Error('同级部门不能重复')) : callBack()
            }
          },
          trigger: 'blur' }
        ],

        // 部门编码校验
        code: [{ required: true, message: '请输入部门编码', trigger: 'blur' },
          { min: 1, max: 50, message: '密码长度: 1~50字符之间', trigger: 'blur' },
          { validator: async(blur, value, callBack) => {
            // 部门编码不允许和其他的编码一样
            const res = await getDepartmentApi()
            // 没有 id 就是编辑
            if (!this.form.id) {
              const bool = res.data.depts.some(item => {
                return item.code === value
              })
              bool ? callBack(new Error('部门编码已存在')) : callBack()
              callBack()
            } else {
              // 找到所有的同级元素
              const arr = res.data.depts.filter(item => {
                return item.code === this.form.code && item.id !== this.form.id
              })
              const bool = arr.some(item => {
                return item.code === value
              })
              bool ? callBack(new Error('同级部门编码不能相同')) : callBack()
            }
          },
          trigger: 'blur' }
        ],

        // 部门负责人校验
        manager: [{ required: true, message: '请输入部门负责人', trigger: 'blur' },
          { min: 1, max: 50, message: '密码长度: 1~50字符之间', trigger: 'blur' },
          { validator: (blur, value, callBack) => {
            // 部门编码不允许和其他的部门负责人一样
            callBack()
          }, trigger: 'blur' }
        ],
        introduce: [{ required: true, message: '请输入部门介绍', trigger: 'blur' },
          { min: 1, max: 50, message: '密码长度: 1~50字符之间' }
        ]
      },
      // 部门负责人
      principalList: []
    }
  },
  // 计算属性 是新增还是编辑
  computed: {
    myTitle: function() {
      return this.form.id ? '编辑面板' : '新增面板'
    }
  },
  async created() {
    const employeeList = await getPrincipalApi()
    this.principalList = employeeList.data
    // console.log(employeeList)
  },
  methods: {
    // 得到当前部门操作的详情
    async getInquire(id) {
      const res = await getInquireApi(id)
      this.form = res.data
      // console.log(res)
    },
    // 关闭弹框
    cancel() {
      this.$emit('update:dialogShow', false)
      // 关闭面板移除表单校验
      this.$refs.myForm.resetFields()
    },
    // 提交表单
    submit() {
      this.$refs.myForm.validate(async res => {
        if (res) {
          await getAddDepartmentApi({
            ...this.form,
            pid: this.id
          })
          // 关闭新增面板
          this.$emit('update:closeDialog', false)
          this.form = {
            name: '',
            code: '',
            manager: '',
            introduce: ''
          }
          // 提示新增成功
          this.$message({
            type: 'success',
            message: '新增成功'
          })
          // 更新页面数据
          this.$emit('getDeptData')
          // 清空数据源
          this.form = {
            name: '',
            code: '',
            manager: '',
            introduce: ''
          }
        } else {
          console.log('失败')
        }
      })
    }
  }
}
</script>

<style lang="scss" scope>
.department {
}
</style>
